<script setup lang="ts">
import {defineProps, defineEmits, onMounted, reactive, watch} from 'vue'
import { showToast } from 'vant';
const props = defineProps({
  items: {
    default: [],
    type: Array,
  },
  roomNum: {
    type: String
  }
})

const state=reactive({
  itemData:[]
})

onMounted(()=>{
  state.itemData = props.items
})

watch(
    () => props,
    (currentState, prevState) => {
      console.log(
          "deep ",
          currentState.items,
          prevState.items
      );
      state.itemData = currentState.items
    },
    { deep: true,/**immediate:true**/ }
);


//监听方法
const emit = defineEmits(['submit'])
const submitOrder = ()=>{
  let checkData = state.itemData.filter((item) => {
    return item.checkState==true
  })
  if(checkData.length>0){
    emit('submit', {data:checkData,roomNum:props.roomNum})
  }else{
    showToast('当前无选中座次信息,请先选择');
  }
}

const choseItem=(item)=>{
  if(item.disabled){
    showToast('当前座次已售卖');
    return false;
  }
  if(item.buyStatus){
    showToast('你已购买当前座次');
    return false;
  }
  item.checkState=!item.checkState;
}
</script>

<template>
    <div class="top">
         <div class="top-item border-left">WC</div>
         <div>{{props.roomNum}}</div>
         <div class="top-item border-right">WC</div>
    </div>

    <div>
       <div class="item">
           <div class="chose-item"
                v-for="item in state.itemData" :key="item.id"
                :class="{'item-active':item.checkState,'item-buy':item.buyStatus,'item-disabled':item.disabled}"
                @click="choseItem(item)">{{item.name}}</div>
       </div>
    </div>
  <view style="display: flex;justify-content: center;padding-top:16px;">
    <van-button type="success" @click="submitOrder" style="background: #747bff;width:92%">提交选中座次</van-button>
  </view>
</template>

<style scoped lang="scss">
body{background: #1a1a1a}
.read-the-docs {
  color: #888;
}
.top{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  width: 375px;
  padding:12px;
  box-sizing: border-box;
  font-size: 17px;
  line-height: 50px;
  color:#fff;
}

.top-item{
  width:138px;
  height:50px;
  line-height: 50px;
  text-align: center;
  color:#fff;
  border:1px solid #7A7886;
  color:#7A7886;
}

.border-left{
  border-top-left-radius: 40px;
}

.border-right{
  border-top-right-radius: 40px;
}

.item{
  display: flex;
  flex-wrap: wrap;
  padding:12px;
  box-sizing: border-box;
  width: 375px;
}

.chose-item{
  width:64px;
  height:64px;
  border:1px solid #C48397;
  color:#C48397;
  margin-right:6px;
  margin-top:10px;
  text-align: center;
  line-height: 64px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
}

.chose-item:nth-of-type(2n){
  margin-right:72px;
}

.chose-item:nth-of-type(4n){
  margin-right:0px;
}

.item-active{
  background:rgb(255,255,255,0.9);
  color: #FB696A;
}

.item-disabled{
  border:1px solid #7A7886;
  color:#7A7886;
}

.item-buy{
  background:#FB696A;
  color: #fff;
}
</style>
